<template>
	<wd-notify />
	<wd-form ref="form" :model="model">
		<wd-cell-group border>
			<wd-input label="角色名称" label-width="100px" prop="name" clearable v-model="model.name" placeholder="请输入角色名称"
				:rules="[{ required: true, message: '请填写角色名称' }]" />
			<wd-input label="唯一标识" label-width="100px" prop="scope" clearable v-model="model.scope"
				placeholder="请输入角色唯一标识" :rules="[{ required: true, message: '请填写角色唯一标识' }]" />
			<wd-input label="备 注" label-width="100px" prop="comment" clearable v-model="model.commnet"
				placeholder="请输入备注" />
			<wd-cell title="启用">
				<wd-switch v-model="checked" />
			</wd-cell>
		</wd-cell-group>
		<view class="footer">
			<wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
		</view>
	</wd-form>
</template>

<script setup>
	import { useNotify } from 'wot-design-uni'
	const { showNotify, closeNotify } = useNotify()
	import overallRequest from "@/utool/http/http.js"
	import {
		toRaw,
		reactive,
		ref
	} from 'vue'
	const form = ref()
	const api = ref("/role/add")

	const model = reactive({
		name: '',
		scope: "",
		commnet: ""
	})
	const limit = ref(null)
	const page = ref(1)
	const pages = ref(null)
	const total = ref(null)
	

	function handleSubmit(data) {

		form.value
			.validate()
			.then(({
				valid,
				errors
			}) => {
				if (valid) {
					return overallRequest("/role/add", {
						method: "POST",
						data: toRaw(model)
					})
				}
			}).then(res => {
				let {
					msg
				} = res
				showNotify({ type: 'success', message: msg })
				model.name = "" 
				model.commnet = ""
				model.scope = ""
			})
			.catch((error) => {
				console.log(error, 'error')
			})

	}
</script>

<style>
.footer{
	padding: 40rpx 40rpx;
}
</style>